<template>
	<!-- 每日提示、章节强化、错题攻克 -->
	<view class="content" :class="'content'+type">
		<view class="base-page-bg-img"><image class="img" src="/static/image/hszg.png" mode="aspectFit"></image></view>
		<nav-bar leftText="陶老师AI智能刷题" leftType="1" :leftColor="stylesColor[type]"></nav-bar>
		<view class="top-title">
			<view class="left">{{titleType[type]}}<view class="direction">→</view></view>
			<view v-if="type=='3'" class="right" @click="openModal">{{keName}}<view class="iconfont icon-fanhui base-fanhui"></view></view>
		</view>
		<view class="message1">AI生成题目，避免盲目刷题，针对性和有效性</view>
		<view class="message2">AI生成题目过程</view>
		<view class="course-list">
			<view class="item">
				<view class="direction">→</view>
				<view class="r"><view class="rs"></view></view>
				<view class="msg-info">
					<view class="t1">AI数据提取，用户数据分析</view>
					<view class="t2">错题-错题关联-章节重点...</view>
				</view>
				<view class="link-plan">
					<view class="link">“专属分析"<view class="direction2">→</view></view>
					<view class="plan">已经完成<view class="n">{{task1}}%</view></view>
				</view>
			</view>
			<view class="item">
				<view class="direction">→</view>
				<view class="r"><view class="rs"></view></view>
				<view class="msg-info">
					<view class="t1">陶老师知识库联合匹配</view>
					<view class="t2">历年真题-高频考点.........</view>
				</view>
				<view class="link-plan">
					<view class="link">“独家专业知识库"<view class="direction2">→</view></view>
					<view class="plan">已经完成<view class="n">{{task2}}%</view></view>
				</view>
			</view>
			<view class="item">
				<view class="direction">→</view>
				<view class="r"><view class="rs"></view></view>
				<view class="msg-info">
					<view class="t1">生成{{titleType[type]}}题组</view>
				</view>
				<view class="link-plan">
					<view class="plan">已经完成<view class="n">{{task3}}%</view></view>
				</view>
			</view>
		</view>
		<view class="creation">
			<view class="title">生成题组</view>
			<scrollList :items="fortifyList"></scrollList>
		</view>
		<view class="btn-list">
			<button v-if="task1!==0 && isShow" class="base-btn3" disabled>
				累计
				<rollingCounter :current="fortifyList.length"></rollingCounter>
				次生成
			</button>
			<button v-else-if="task1===0" @click="exStart" class="base-btn1">生成题目</button>
			<button v-else-if="task1===100 && !disabledStart" @click="startSubject" class="base-btn1">开始答题</button>
			<button class="base-btn2" @tap="back">返回</button>
		</view>
		
		<subjectPopup ref="subject" @menSelect="menSelect" @setKeName="setKeName"></subjectPopup>
	</view>
</template>

<script>
	import { errorReplay,chapterFortify,todayEnhance,mockExam } from '@/api/index.js'
	import rollingCounter from '@/components/rollingCounter.vue';
	import scrollList from '@/components/scrollList.vue';
	import subjectPopup from '@/components/subjectPopup.vue';
	export default {
		components: {
			rollingCounter,
			scrollList,
			subjectPopup
		},
		data() {
			return {
				type: '1',
				stylesColor: {
					'1': '#44B9C9',
					'2': '#F89C24',
					'3': '#4E86F7',
					'4': '#F89C24',
				},
				titleType: {
					'1': '错题攻克',
					'2': '章节强化',
					'3': '每日提升',
					'4': '万人模拟考',
				},
				keName: '全部科目',
				timer: null,
				progress: 0,
				task1: 0,
				task2: 0,
				task3: 0,
				fortifyList: [],
				prdId: '',
				keMen: [],
				isShow: true,
			}
		},
		watch: {
			task1(newVal){
				if(newVal==100){
					setTimeout(()=>{
						this.isShow=false;
					},1000)
				}
			},
			mrtsKeMu: {
				handler(newVal){
					if(!newVal){
						this.keName='请选择组题科目'
					}
				},
				immediate: true
			},
			keMen: {
				handler(newVal){
					if(newVal.includes(this.mrtsKeMu)){
						this.keName=this.mrtsKeMu
					}
				},
				deep: true
			}
		},
		computed: {
			getKeMuId() {
				return this.$store.getters.getKeMuId;
			},
			getKeMuParams() {
				return this.$store.getters.getKeMuParams;
			},
			getKeMuItem() {
				return this.$store.getters.getKeMuItem;
			},
			mrtsKeMu() {
				return this.$store.state.mrtsKeMu;
			},
			filterList(){
				return this.fortifyList.slice(0,6)
			},
		},
		onLoad(options) {
			console.log(options,'----options');
			this.type=options.type || '1';
			this.prdId=options.id;
		},
		methods: {
			setKeName(keMen){
				this.keMen=keMen;
			},
			// 开始答题
			startSubject(){
				this.$store.commit('set',['isAI',true]);
				this.$store.commit('set',['isAIType',this.type]);
				this.$store.commit('set',['isError',false]);
				let list=[this.titleType[this.type]];
				this.$store.commit('set',['sheetTitle',list]);
				uni.navigateTo({
					url: `/pagesC/topicRelated/answerSheet?type=1`
				})
			},
			// 生成题目
			exStart(){
				if(!this.mrtsKeMu && this.type=='3'){
					this.openModal()
					return uni.showToast({
						title: '请选择组题科目',
						icon: 'none'
					})
				}
				this.disabledStart=false;
				if(this.type=='1'){
					this.errorReplay()
				}else if(this.type=='2'){
					this.chapterFortify(this.prdId)
				}else if(this.type=='3'){
					this.todayEnhance()
				}else if(this.type=='4'){
					this.mockExam()
				}
				this.getTask();
			},
			getTask(){
				const task1=this.$common.createFakeProgress();
				const task2=this.$common.createFakeProgress();
				const task3=this.$common.createFakeProgress();
				task1.start();
				task2.start();
				task3.start();
				// 随时取进度
				this.timer=setInterval(() => {
					this.task1=Math.floor(task1.progress);
					this.task2=Math.floor(task2.progress);
					this.task3=Math.floor(task3.progress);
					if(this.task1==100 && this.task2==100 && this.task3==100){
						clearInterval(this.timer)
					}
				}, 100)
			},
			menSelect(name){
				if(this.keName!=name){
					this.$store.commit('set',['mrtsKeMu',name]);
					uni.setStorageSync('mrtsKeMu',name);
				}
				this.keName=name;
				console.log(this.keName,'---44')
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			openModal(){
				console.log(11)
				this.$refs.subject.openModal()
			},
			// 生成失败初始化shuju
			failCreate(){
				this.disabledStart=true;
				setTimeout(()=>{
					uni.showToast({
						title: '生成题目失败',
						icon: 'none'
					})
					this.task1=this.task2=this.task3=0
				},4100)
			},
			// 错题攻克
			errorReplay(){
				errorReplay(this.getKeMuParams).then(res=>{
					this.$store.commit('subjectByDeptUpdata',res);
					if(res.data.length>0){
						this.fortifyList=res.data;
					}else{
						this.failCreate()
					}
				}).catch(err=>{
					this.failCreate()
				})
			},
			// 章节强化
			chapterFortify(pid2){
				let params=this.getKeMuParams;
				chapterFortify({pid2,...params}).then(res=>{
					this.$store.commit('subjectByDeptUpdata',res);
					if(res.data.length>0){
						this.fortifyList=res.data;
					}else{
						this.failCreate()
					}
				}).catch(err=>{
					this.failCreate()
				})
			},
			// 每日提升
			todayEnhance(){
				let params=this.getKeMuParams;
				let item=this.getKeMuItem;
				if(this.keName!='全部科目'){
					if([1,2].includes(item.orderNum)){//护士资格,初级护师
						params={...params,kemu2: this.keName}
					}else if(item.orderNum==3){//主管护师
						params={...params,kemu3: this.keName}
					}
				}
				todayEnhance(params).then(res=>{
					this.$store.commit('subjectByDeptUpdata',res);
					if(res.data.length>0){
						this.fortifyList=res.data;
					}else{
						this.failCreate()
					}
				}).catch(err=>{
					this.failCreate()
				})
			},
			// 万人模考
			mockExam(){
				mockExam(this.getKeMuParams).then(res=>{
					this.$store.commit('subjectByDeptUpdata',res);
					if(res.data.length>0){
						this.fortifyList=res.data;
					}else{
						this.failCreate()
					}
				}).catch(err=>{
					this.failCreate()
				})
			},
		},
		beforeDestroy() {
		    if (this.timer) clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .perch{
		height: 190rpx !important;
	}
	.content{
		padding: 0 36rpx 60rpx 60rpx;
		background: linear-gradient( 180deg, #CAE3FF 0%, #FFFFFF 34%, #F5F3F3 66%, #FFFFFF 100%);
		::v-deep .nav-bar-content{
			padding-left: 60rpx !important;
		}
	}
	.top-title{
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		color: #151515;
		font-size: 50rpx;
		font-weight: 600;
		.direction{
			margin-left: 12rpx;
			color: #4E86F7;
		}
		&,.left,.right{
			display: flex;
		}
		.right{
			display: flex;
			align-items: center;
			color: #4F4F51;
			&,.iconfont{
				font-size: 26rpx;
			}
			.iconfont{
				margin-left: 4rpx;
			}
		}
	}
	.message1,.message2{
		font-size: 28rpx;
	}
	.message1{
		margin-bottom: 10rpx;
		color: #8A8E99;
	}
	.message2{
		margin-bottom: 56rpx;
		color: #91B5F9;
	}
	.course-list{
		margin-bottom: 84rpx;
		.item{
			display: flex;
			align-items: center;
			height: 76rpx;
			margin-bottom: 72rpx;
			font-size: 28rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.msg-info{
			flex: 1;
			overflow: hidden;
			.t1{
				color: #222;
			}
			.t2{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #999;
				font-size: 24rpx;
			}
		}
		.direction,.r,.link-plan{
			flex-shrink: 0;
		}
		.direction{
			margin-right: 14rpx;
			color: #CBD9F8;
		}
		.r{
			position: relative;
			width: 76rpx;
			height: 76rpx;
			margin-right: 34rpx;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: 6rpx 6rpx 16rpx 2rpx rgba(0,0,0,0.16);
		}
		.rs{
			position: absolute;
			top: 24rpx;
			left: 16rpx;
			width: 42rpx;
			height: 12rpx;
			&,&::after,&::before{
				background-color: #8FB3F9;
				border-radius: 4rpx;
			}
			&::after,&::before{
				content: "";
				position: absolute;
				bottom: -18rpx;
				width: 18rpx;
				height: 12rpx;
			}
			&::after{
				left: 0;
			}
			&::before{
				right: 0;
			}
		}
		.link-plan{
			font-size: 20rpx;
			.link,.plan{
				display: flex;
			}
			.link{
				margin-bottom: 6rpx;
				color: #5283E7;
			}
			.direction2{
				margin-left: 6rpx;
				font-size: 24rpx;
				color: #6C6C6C;
			}
			.plan{
				justify-content: flex-end;
				font-size: 24rpx;
				color: #A8C2F9;
			}
			.n{
				color: #20CA68;
			}
		}
	}
	.creation{
		padding-right: 24rpx;
		margin-bottom: 96rpx;
		.title{
			margin-bottom: 22rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #151515;
		}
	}
	.btn-list{
		padding-right: 24rpx;
	}
	.base-btn1,.base-btn2,.base-btn3{
		margin-bottom: 28rpx;
	}
	.base-btn3{
		display: flex;
		justify-content: center;
	}
	.content1{
		.top-title .direction,.message2{
			color: #69C9D3;
		}
		.course-list .link-plan .link{
			color: #FDC57C;
		}
		.course-list .link-plan .n{
			color: #73DDE4;
		}
		.course-list .direction{
			color: #B2DBE1;
		}
		.course-list .rs, .course-list .rs::after, .course-list .rs::before{
			background-color: #A5DEE4;
		}
		.base-btn1{
			background-color: #64C8D3;
		}
		.base-btn2{
			border-color: #64C8D3;
			color: #64C8D3;
		}
		.base-btn3{
			background-color: #B2DBE1 !important;
		}
	}
	.content2,.content4{
		background: linear-gradient( 180deg, #FFE8CA 0%, #FFFFFF 34%, #F5F3F3 63%, #FFFFFF 100%);
		.top-title .direction,.message2,.course-list .link-plan .n,.course-list .link-plan .link{
			color: #FDC57C;
		}
		.course-list .direction{
			color: #FEDCB1;
		}
		.course-list .rs, .course-list .rs::after, .course-list .rs::before{
			background-color: #FDC57C;
		}
		.base-btn1{
			background-color: #FCBE6F;
		}
		.base-btn2{
			border-color: #FCBE6F;
			color: #FCBE6F;
		}
		.base-btn3{
			background-color: #FEDCB1 !important;
		}
	}
	.content3{
		.top-title .direction,.message2,.course-list .link-plan .link{
			color: #91B5F9;
		}
		.course-list .link-plan .n{
			color: #20CA68;
		}
		.course-list .direction{
			color: #CBD9F8;
		}
		.course-list .rs, .course-list .rs::after, .course-list .rs::before{
			background-color: #8FB3F9;
		}
		.base-btn1{
			background-color: #6695F5;
		}
		.base-btn2{
			border-color: #6695F5;
			color: #6695F5;
		}
	}
</style>
